<template>
  <div>
		<SubmitPay :payContent="payContent"></SubmitPay>
		<el-space>
			<el-date-picker
				v-model="params.createDate"
				value-format="YYYY-MM-DD"
				@change="getTableData"></el-date-picker>
			<el-input v-model="params.registerNo" placeholder="请输入挂号单编号" @keypress="down"></el-input>
		</el-space>
		<el-table style="margin-top: 20px;" :data="tableData" border>
			<el-table-column label="单据编号" prop="registerNo" show-overflow-tooltip></el-table-column>
			<el-table-column label="类型" prop="type" width="150px"></el-table-column>
			<el-table-column label="金额" width="100px">
				<template #default="scope">
					{{(scope.row.price / 100).toFixed(2)}}
				</template>
			</el-table-column>
			<el-table-column label="订单日期" prop="createDate" width="150px"></el-table-column>
			<el-table-column label="订单时间" prop="createTime" width="150px"></el-table-column>
			<el-table-column label="状态">
				<template #default="scope">
					<span v-if="scope.row.active === 1">未缴费</span>
					<span v-else-if="scope.row.active === 2">已缴费</span>
					<span v-else>已退费</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="150px">
				<template #default="scope">
					<el-button
						v-if="scope.row.active === 1"
						@click="pay(scope.row.no, scope.row.price / 100, scope.row.type)"
						size="small"
						plain
						type="primary">缴费</el-button>
				</template>
			</el-table-column>
		</el-table>
  </div>
</template>

<script setup>
import SubmitPay from '@@/submitPay'
import { ref, reactive } from 'vue'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { get, post } from '@/axios'
const payContent = ref('')
const params = reactive({
	registerNo: '',
	createDate: dayjs().format('YYYY-MM-DD')
})
const tableData = ref([])
function getTableData () {
	if (params.registerNo.trim() === '') {
		ElMessage.error('请输入挂号单编号')
		return
	}
	get('/pmsOrder/getOrder', params, content => {
		tableData.value = content
		console.dir(content)
	})
}
function down (event) {
	if (event.keyCode === 13) {
		getTableData()
	}
}
function pay (no, total, type) {
	post('/pmsOrder/payment', { no, total, type }, content => {
		payContent.value = content
		console.dir(content)
	})
}
</script>

<style scoped lang="scss">
</style>